<template>
    <div>
        <h1>vue3语法</h1>
        <h2>{{ msg }}</h2>
        <h2>{{ num }}</h2>
        <input type="text" v-model="num" />
        <button @click="add">加</button>
        <h2>{{ obj.name }}</h2>
        <input type="text" v-model="obj.name" />
        <button @click="showObj">展示对象</button>
        <h2>{{ arr }}</h2>
        <ul>
            <li v-for="(item, index) in arr" :key="index">
                <div>{{ item }}</div>
            </li>
        </ul>
        <ul>
            <li v-for="(value, key, index) of obj" :key="index">
                <div>{{ value }}---{{ key }}---{{ index }}</div>
            </li>
        </ul>
        <hr />
        <h1>data当中的值</h1>
        <h2>{{ info }}</h2>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref  } from 'vue'

export default defineComponent({
    setup () {
        let msg = ref("阳了个阳");
        let num = ref(0);
        function add(){
            console.log(num);
            console.log(num.value);
            num.value += 1;
        };
        let obj = reactive({
            name: "tom",
            age:10,
        });
        let arr = reactive([1,2,5]);
        function showObj(){
            console.log(obj);
            console.log(num);

        };

        return {
            msg,
            num,
            add,
            obj,
            showObj,
            arr,
        };
    },
    data(){
        return{
            info:"看看setup和data当中的值一样吗？",

        };
    },
});
</script>

<style scoped>

</style>